<template>
  <div class="progress-bar" ref="progressBar" @click="processClick">
    <div class="bar-inner">
      <div class="progress" ref="progress"></div>
      <div class="progress-btn-wrapper"
       ref="progressBtn"
       @touchstart="btnStart"
        @touchmove="btnMove"
         @touchend="btnEnd"
        >
        <div class="progress-btn"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {prefixStyle} from '@/common/js/dom'
const btnWidth = 16
const transform = prefixStyle('transform')
console.log(transform)
export default {
  components: {},
  props: {
    percent: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
    }
  },
  watch: {
    percent(newPrecent) {
      if (newPrecent >= 0 && !this.touch.initFlag) {
        const barWidth = this.$refs.progressBar.clientWidth - btnWidth
        const progressWid = newPrecent * barWidth
        // console.log(progressWid)
        this.handleProgressBtn(progressWid)
      }
    }
  },
  computed: {},
  created() {
    this.touch = {}
  },
  mounted() {},
  methods: {
    processClick(e) {
      console.log(e)
      const rect = this.$refs.progressBar.getBoundingClientRect()
      console.log(rect)
      const _offsetX = e.pageX - rect.left
      this.handleProgressBtn(_offsetX)
      this.tiggerProcent()
    },
    handleProgressBtn(progressWid) {
      this.$refs.progress.style.width = progressWid + 'px'
      this.$refs.progressBtn.style[transform] = `translate3d(${progressWid}px, 0, 0)`
    },
    btnStart(e) {
      this.touch.initFlag = true
      this.touch.startX = e.touches[0].pageX
      this.touch.left = this.$refs.progress.clientWidth
    },
    btnMove(e) {
      console.log(this.touch.initFlag)
      if (!this.touch.initFlag) {
        return
      }
      const diffX = e.touches[0].pageX - this.touch.startX
      console.log(diffX)
      const progressWid = Math.min(this.$refs.progressBar.clientWidth - btnWidth, Math.max(0, this.touch.left + diffX))
      this.handleProgressBtn(progressWid)
    },
    btnEnd() {
      this.touch.initFlag = false
      this.tiggerProcent()
    },
    tiggerProcent() {
      const barWidth = this.$refs.progressBar.clientWidth - btnWidth
      const procent = this.$refs.progress.clientWidth / barWidth
      this.$emit('changeCurrent', procent)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/common/stylus/variable.styl'
.progress-bar
  height: 30px
  .bar-inner
    position: relative
    top: 13px
    height: 4px
    background: rgba(0, 0, 0, 0.3)
    .progress
      position: absolute
      height: 100%
      background: $color-theme
    .progress-btn-wrapper
      position: absolute
      left: -8px
      top: -13px
      width: 30px
      height: 30px
      .progress-btn
        position: relative
        top: 7px
        left: 7px
        box-sizing: border-box
        width: 16px
        height: 16px
        border: 3px solid $color-text
        border-radius: 50%
        background: $color-theme
</style>